<template>
    <div class="pages">
        <u>总数据 {{value.count}} 条</u>
        <a @click="toggleClick(value.currentpage-1)" class="p_back" v-if="value.currentpage > 1">{{backText}}</a>
        <a @click="toggleClick(t)" v-for="t in d.leftAry" :key="t">{{t}}</a>
        <samp v-if="d.leftSplit">...</samp>
        <a @click="toggleClick(t)" v-for="t in d.currentToLeft" :key="t">{{t}}</a>
        <span>{{value.currentpage}}</span>
        <a @click="toggleClick(t)" v-for="t in d.currentToRight" :key="t">{{t}}</a>
        <samp v-if="d.rightSplit">...</samp>
        <a @click="toggleClick(t)" v-for="t in d.rightAry" :key="t">{{t}}</a>
        <a @click="toggleClick(value.currentpage+1)" class="p_next" v-if="value.currentpage < d.pageCount">{{nextText}}</a>
    </div>
</template>

<script setup>
    import { reactive, watch } from 'vue'
    const props = defineProps({
        value: {
            require: true,
            type: Object,
            default: {
                currentpage: 1,
                pagesize: 20,
                count: 0 //数据总数
            }
        },
        init:         { type: Function, require: true, },
        autoInit:     { type: Boolean, default: true }, //是否一开始就执行
        displacement: { type: Number, default: 3 }, //中间往左右显示几位
        aroundFixed:  { type: Number, default: 2 }, //前后固定显示几位
        backText:     { type: String, default: "" },
        nextText:     { type: String, default: "" },
    })

    let m = Math.ceil(props.value.count / props.value.pagesize); //记录总数/每页显示=需要几页
    let d = reactive({
        pageCount: m <= 0 ? 1 : m,
        leftAry: [],
        leftSplit: false,
        currentToLeft: [],
        currentToRight: [],
        rightSplit: false,
        rightAry: []
    })

    let Left = () => { // 左边固定显示内容
        d.leftSplit = false
        d.leftAry = []

        if (props.displacement + 1 >= props.value.currentpage) return;
        let start = 1, //起始点肯定是1
            end = props.aroundFixed;//理论结束点
        let s_end = props.value.currentpage - props.displacement; //实际结束点
        d.leftSplit = s_end - end > 1;
        if (s_end <= end) end = --s_end;

        for (let t = start, i = 0; t <= end; t++, i++)
            d.leftAry.push(t)
    }
    let CurrentToLeft = () => { // 中间往左显示内容
        d.currentToLeft = []

        let start = 0, end = 0;
        end = props.value.currentpage - 1;
        start = props.value.currentpage - props.displacement;
        if (start < 1) start = 1;

        for (var t = start, i = 0; t <= end; t++, i++)
            d.currentToLeft.push(t)
    }
    let CurrentToRight = () => { // 中间往右显示内容
        d.currentToRight = []

        let start = 0, end = 0;
        start = props.value.currentpage > d.pageCount ? d.pageCount + 1 : props.value.currentpage + 1;
        end = props.value.currentpage + props.displacement;
        if (end >= d.pageCount) end = d.pageCount;

        for (var t = start, i = 0; t <= end; t++, i++)
            d.currentToRight.push(t)
    }
    let Right = () => { // 右边固定显示内容
        d.rightSplit = false
        d.rightAry = []

        if (d.pageCount - props.displacement <= props.value.currentpage) return;
        let start = d.pageCount - props.aroundFixed + 1, //理论上起始点           
            s_start = props.value.currentpage + props.displacement; //实际起始点

        d.rightSplit = start - s_start > 1;
        if (s_start >= start) start = ++s_start;
        var end = d.pageCount;

        for (var t = start, i = 0; t <= end; t++, i++)
            d.rightAry.push(t)
    }
    watch(
        [
            () => props.value.count,
            () => props.value.currentpage,
        ],
        (val) => {
            // console.log("watch",val)
            let m = Math.ceil(props.value.count / props.value.pagesize); //记录总数/每页显示=需要几页
            d.pageCount = m <= 0 ? 1 : m
            Left()
            CurrentToLeft()
            CurrentToRight()
            Right()
            // console.log(d)
        },
    )
    if(props.autoInit){
        props.init()
    }

    const toggleClick = page => {
        props.value.currentpage = page
        props.init()
        // proxy.$emit('toggleClick', page) //这是对外放出去，这里的名称就是对外的名称
    }
</script>

<style scoped lang="scss">
    .pages { height: 50px; min-height: 50px; display: flex; align-items: center; justify-content: flex-end; font-size:12px; color: $start-color;
        u { height: 26px;  display:flex; align-items: center; text-decoration: none; padding-right: 20px; }
        a, span, samp { min-width: 26px; padding: 0 10px; box-sizing: border-box; height: 26px;  display:flex; justify-content: center; align-items: center; }
        a, span { cursor: pointer; }
        span { background-color: lighten($start-color, 10%); color: $font-color;  }
        .p_back::after { content:'\e744'; font-family: "iconfont"; font-size: 18px; }
        .p_next::after { content:'\e743'; font-family: "iconfont"; font-size: 18px; }
    }
</style>